<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Widget Class</title>

    <link rel="stylesheet" type="text/css" href="../../../../build/cssreset/reset.css" />
    <link rel="stylesheet" type="text/css" href="../../../../build/cssfonts/fonts.css" />

    <script type="text/javascript" src="../../../../build/yui/yui.js"></script>

    <style>
        body {
            padding:0;
            margin:0;
        }

        .hideme {
            width:30em;
            display:block;
        }

        .yui3-overlay {
            background-color:#0000ff;
        }

        .yui3-overlay .yui3-overlay-content {
            border:5px solid #000000;
            padding:0.4em;
            background-color:#eee;
        }

        .yui3-overlay .yui3-widget-stdmod span {
            background-color:#000;
            color:#fff;
        }

        .yui3-overlay .yui3-widget-stdmod .yui3-widget-hd {
            border:2px solid red;
            background-color:#cc0000;
            color:#fff;
            padding:2px;
        }

        .yui3-overlay .yui3-widget-stdmod .yui3-widget-bd {
            font-family:monospace;
            border:2px solid blue;
            padding:2px;
        }

        .yui3-overlay .yui3-widget-stdmod .yui3-widget-ft {
            border:2px solid green;
            background-color:#00cc00;
            color:#fff;
            padding:2px;
        }

        .sels {
            position:absolute;
        }

        #fromMarkup {
            z-index:10;
        }

        #align {
            opacity:.5;
            filter:alpha(opacity=50);
            position:relative;
            z-index:6;
            top:20px;
            left:400px;
            width:300px;
            height:250px;
            border:1px solid black;
            background-color:#cc0000;
        }
    </style>
</head>
<body class="yui3-skin-sam">

    <div class="sels">
       <button id="control-run" type="button">run</button>    
       <button id="control-show" type="button">show</button>
       <button id="control-hide" type="button">hide</button>

        <div style="overflow:auto;width:20em;height:5em">
            <div style="height:200em"></div>
        </div>

        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
        <select class="hideme"><option>Foo</option></select>
    </div>

    <div id="align">
        Align Here
    </div>

    <div class="foo" id="foobar"></div>

    <div id="fromMarkup">
        <div class="yui3-widget-hd">
            <span>Header From Markup</span>
        </div>
        <div class="yui3-widget-bd">
            <span>Body From Markup</span>
        </div>
        <div id="fourth" class="yui3-widget-ft">
            <span>Footer From Markup</span>
        </div>
    </div>

    <script type="text/javascript">
        var widget, widget2;

        YUI({filter:"raw"}).use("async-queue", "overlay", function(Y) {

                widget = new Y.Overlay({ 
                    width:"12em",
                    align:{node:'#align', points:["tr", "tl"]}, 
                    zIndex:5,
                    headerContent:"Overlay Header",
                    bodyContent:"width:12em, #align, tr, tl, zIndex:5",
                    footerContent:"Overlay Footer",
                    render: "#foobar"
                });

                widget.after("xyChange", function(e) {
                    Y.log(e.newVal);
                });

                widget.after("contentUpdate", function() {
                    Y.log("Content Updated");
                });

                widget2 = new Y.Overlay({
                    contentBox: "#fromMarkup",
                    width:200,
                    height:200,
                    xy: [800,200],
                    footerContent: "Footer Content - was in markup, but got over-ridden in constructor",
                    render:true
                });

                var stepDelay = 2000;

                var fns = [
                    function() {
                        widget.set("height", "20em");
                    },
                    function() {
                        widget.set("bodyContent", "Height changed to 20em in previous step");
                    },
                    function() {
                        widget.move(0,0);
                        widget.set("bodyContent", "move(0,0)");
                    },
                    function() {
                        widget.set("height", "12em");
                        widget.set("bodyContent", "height, 12em");
                    },
                    function() {
                        widget.set("align", {node:"#align", points:["lc", "rc"]});
                        widget.set("bodyContent", "#align, lc, rc");
                    },
                    function() {
                        widget.set("centered", "#align");
                        widget.set("bodyContent", "#align, centered");
                    },
                    function() {
                        widget.set("zIndex", 7);
                        widget.set("bodyContent", "zIndex, 7");
                    },
                    function() {
                        widget.set("align", {points:["rc", "rc"]});
                        widget.set("bodyContent", "viewport, rc, rc");
                    },
                    function() {
                        widget.set("centered", true);
                        widget.set("bodyContent", "viewport, centered");
                    },
                    function() {
                        widget.move(0, 0);
                        widget.set("bodyContent", "move(0,0)");
                    },
                    function() {
                        widget.set("width", "20em");
                        widget.set("bodyContent", "width, 20em");
                    },
                    function() {
                        widget.set("fillHeight", "header");
                        widget.set("bodyContent", "fillHeight, header");
                    },
                    function() {
                        widget.set("fillHeight", "footer");
                        widget.set("bodyContent", "fillHeight, footer");
                    },
                    function() {
                        widget.set("fillHeight", null);
                        widget.set("bodyContent", "fillHeight, false");
                    },
                    function() {
                        widget.set("fillHeight", "body");
                        widget.set("bodyContent", "fillHeight, body");
                    },
                    function() {
                        widget.set("shim", false);
                        widget.set("bodyContent", "shim, false");
                    },
                    function() {
                        widget.set("shim", true);
                        widget.set("bodyContent", "shim, true");
                    },
                    function() {
                        widget.hide();
                    },
                    function() {
                        widget.show();
                        widget.set("bodyContent", "hide, followed by show");
                    },
                    function() {
                        widget.setStdModContent(Y.WidgetStdMod.HEADER, Y.Node.create("<p>Insert Before Header Content</p>"), Y.WidgetStdMod.BEFORE);
                        widget.setStdModContent(Y.WidgetStdMod.FOOTER, Y.Node.create("<p>Append After Footer Content</p>"), Y.WidgetStdMod.AFTER);
                        widget.setStdModContent(Y.WidgetStdMod.BODY, "Replaced Body - DONE!", Y.WidgetStdMod.REPLACE);
                    },
                    function() {
                        widget.destroy();
                    }
                ];

                var q = new Y.AsyncQueue();
                for (var i = 0; i < fns.length; i++){
                    q.add({
                        timeout:stepDelay,
                        fn:fns[i]
                    });
                }
                // q.run();

                Y.on('click', Y.bind(widget.show, widget), Y.Node.one('#control-show'));
                Y.on('click', Y.bind(widget.hide, widget), Y.Node.one('#control-hide'));
                Y.on('click', Y.bind(q.run, q), Y.Node.one('#control-run'));

            });
    </script>
</body>
</html>
